<script setup>
import { onMounted, ref } from 'vue'
import Editor from '@/components/editer/letter/Main.vue'
import { setValue } from '@/utils/editer'
import SendSvg from '../components/svg/SendSvg.vue'
import LoadingCar from './components/LoadingCar.vue'

const editor = ref()
const engine = ref()
const loading = ref(false)

onMounted(() => {
  // 页面渲染完了
  engine.value = editor.value ? editor.value.engine : null
  setValue('让此刻的心情,成为未来最珍贵的礼物.')
})

const send = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    location.assign('/letter')
  }, 3000)
  console.log(engine.value.getHtml())
  console.log(engine.value.getValue())
  console.log(engine.value.getJsonValue())
}
</script>

<template>
  <loading-car :loading="loading"></loading-car>
  <div>
    <zlcode-h1>测试版不代表最终版！</zlcode-h1>
    <null-box size="20"></null-box>
    <el-row style="justify-content: center; padding-bottom: 10px">
      <div></div>
      <zlcode-button
        left-text="Send!"
        right-text="发出!"
        bgc="#53affd"
        brd-color="#56585d"
        @click="send"
      >
        <template #svg> <send-svg></send-svg> </template>
      </zlcode-button>
      <div></div>
    </el-row>
    <Editor ref="editor" />
  </div>
</template>

<style lang="less" scoped>
.header {
  padding: 12px;
}
/** 编辑器中标记样式 ---- 开始 **/
[data-mark-preview],
[data-mark-id] {
  position: relative;
}

span[data-mark-preview],
span[data-mark-id] {
  display: inline-block;
}

[data-mark-preview]::before,
[data-mark-id]::before {
  content: '';
  position: absolute;
  width: 100%;
  bottom: 0px;
  left: 0;
  height: 2px;
  border-bottom: 2px solid #f8e1a1 !important;
}

[data-mark-preview] {
  background: rgb(250, 241, 209) !important;
}

[data-card-key][data-mark-id]::before,
[data-card-key][data-mark-preview]::before {
  bottom: -2px;
}
/** 编辑器中标记样式 ---- 结束 **/
</style>
